var app = new Vue({
	el: '#app',
	data: {
		username: "",
		email: "",
		password: "",
		phone: "",
		website: "",
		number: "",
		birthday: "",
		introduction: "",
		pickerValue: "",
		uploadImg: ""
	},
	computed: {
		userInfo() {
			const userInfo = this._data;
			return JSON.stringify(userInfo);
		},
		btnDisabled() {
			if(this.uploadImg) {
				return false
			} else {
				return true
			}
		}
	},
	methods: {
		login() {
			console.log(this.userInfo);
		},
		register() {
			this.$toast('功能建设中...');
		},
		upload() {
			this.$refs.uploader.click();
		},
		onFileChange(e) {
			let file = e.target.files[0];
			if(file.size < Math.pow(1024, 2)) {
				this.successFile(file);
				return;
			} else {
				const name = file.name; //文件名
				const reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = (e) => {
					const src = e.target.result;
					const img = new Image();
					img.src = src;
					img.onload = (e) => {
						const w = img.width;
						const h = img.height;
						const quality = 0.2; // 默认图片质量为0.92
						//生成canvas
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');
						// 创建属性节点
						const anw = document.createAttribute("width");
						anw.nodeValue = w;
						const anh = document.createAttribute("height");
						anh.nodeValue = h;
						canvas.setAttributeNode(anw);
						canvas.setAttributeNode(anh);

						//铺底色 PNG转JPEG时透明区域会变黑色
						ctx.fillStyle = "#fff";
						ctx.fillRect(0, 0, w, h);

						ctx.drawImage(img, 0, 0, w, h);
						// quality值越小，所绘制出的图像越模糊
						const base64 = canvas.toDataURL('image/jpeg', quality); //图片格式jpeg或webp可以选0-1质量区间
						this.uploadImg = base64;
						this.$refs.uploader.value = "";
					}
				}
			}
		},
		getImgSize() {
			//获取base64图片大小，返回KB数字
			let str = this.uploadImg;
			str = str.replace('data:image/jpeg;base64,', ''); //这里根据自己上传图片的格式进行相应修改

			var strLength = str.length;
			var fileLength = parseInt(strLength - (strLength / 8) * 2);

			// 由字节转换为KB
			var size = "";
			size = (fileLength / 1024).toFixed(2);

			console.log(parseInt(size));

		},
		successFile(file) {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = (result) => {
				console.log(file.size)
				this.uploadImg = result.target.result;
				this.$refs.uploader.value = "";
			};
		},
		deleteImg() {
			this.uploadImg = "";
		},
		checkLoadImg() {
			console.log(this.uploadImg)
		}
	}
})